<template>
  <div class="detail__wrapper">
    <el-descriptions :column="1">
      <el-descriptions-item label="主控ID">
        <div>
          <div>SADF-465Q-F6A5-W1Q3</div>
          <div class="device-info">
            <el-descriptions :column="2">
              <el-descriptions-item label="产品">{{ id }}</el-descriptions-item>
              <el-descriptions-item label="APP Key">{{ id }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="2">
              <el-descriptions-item label="DeviceName前缀">{{ id }}</el-descriptions-item>
              <el-descriptions-item label="生产批次">{{ id }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="注册信息">
        <div class="register-info">
          <el-descriptions :column="2">
            <el-descriptions-item label="设备统一ID">{{ id }}</el-descriptions-item>
            <el-descriptions-item label="DeviceName">{{ id }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1">
            <el-descriptions-item label="登录密钥">{{ id }}</el-descriptions-item>
            <el-descriptions-item label="消息密钥">{{ id }}</el-descriptions-item>
            <el-descriptions-item label="签名密钥">{{ id }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-descriptions-item>
    </el-descriptions>


  </div>
</template>

<script>
import { format_null } from '@/utils/formatter'

import { deviceRegisterDetailApi } from '@/api/modules/device/register'

export default {
  name: 'DeviceRegisterDetail',
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      info: {
        id: null,
        registerStatus: null,
        type: null,
        createTime: null,
      }
    }
  },
  methods: {
    async getDetail() {
      try {
        const params = {
          id: this.id
        }
        // const res = await deviceRegisterDetailApi(params)
        const res = {
          data: {
            id: 1,
            registerStatus: 0,
            type: 0
          }
        }
        this.info = format_null(res.data)
      } catch (err) {
        console.error(err)
      }
    }
  },
  mounted () {
    this.getDetail()
  }
}
</script>


<style lang="less" scoped>
.detail__wrapper {
  padding-right: 24px;
  :deep(.el-descriptions-item__label) {
    min-width: 60px;
  }
  
  .device-info {
    background-color: rgb(242, 242, 242);
    box-sizing: border-box;
    padding: 24px 24px 12px 24px;
    margin: 12px 0;
    .el-descriptions {
      :deep(.el-descriptions__body) {
  
        background-color: transparent;
      }
  
    }
  }
  .register-info {
    border: 1px solid #CCC;
    box-sizing: border-box;
    padding: 24px;
    :deep(.el-descriptions-item__label) {
      min-width: 80px;
    }
  }
}
</style>